<template>
  <div class="patRule">
    <!-- 搜索区域 -->
    <el-form class="patRule_nav">
      <el-button
        v-if="button1"
        class="add"
        type="primary"
        size="medium"
        @click="creat"
      >添加一条</el-button>
    </el-form>
    <el-table :data="ruleDtos" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="规则序号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payment_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="缴费金额" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payment_price }}元</span>
        </template>
      </el-table-column>
      <el-table-column label="计费周期" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.payment_monthly }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="button2" size="medium" type="success" @click="ruleAdd(scope.row)">编辑</el-button>
          <el-button v-if="button3" size="medium" type="danger" @click="ruleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改一条 -->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 500px; margin-left:50px;"
      >
        <el-form-item v-if="aaa" label="规则序号:">
          <span>{{ temp.payment_id }}</span>
        </el-form-item>
        <el-form-item label="缴费金额:">
          <el-input ref="house_buildings" v-model="temp.payment_price" />元/m²
        </el-form-item>
        <el-form-item label="计费周期:">
          <el-select v-model="temp.payment_monthly" placeholder>
            <el-option
              v-for="item in options"
              :key="item.payment_monthly"
              :label="item.label"
              :value="item.payment_monthly"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="bbb" type="primary" @click="updateData">更改</el-button>
        <el-button v-if="ccc" type="primary" @click="creatData">新增</el-button>
      </div>
    </el-dialog>
    <!-- 确认删除 -->
    <el-dialog :visible.sync="deleteDataFrom" width="30%">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <span>确定删除这一条吗？</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDataFrom = false">取消</el-button>
        <el-button type="primary" @click="deleteData">确定删除</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import { getToken, getAccount, getButtonpermsStr } from '@/utils/auth'
export default {
  data() {
    return {
      ruleDtos: [],
      total: 0,
      currentPage: 0, // 初始页
      pagesize: 0, // 当前页面内的列表行数
      pageNum: 1, // 总数页数
      aaa: false, // （增加修改）表单ID显示
      bbb: true, // （增加修改）表单更新按钮显示
      ccc: true, // （增加修改）表单新增按钮显示
      dialogFormVisible: false,
      rules: {},
      temp: {},
      button1: false,
      button2: false,
      button3: false,
      deleteDataFrom: false,
      buttonpermsStr: getButtonpermsStr(),
      options: [
        {
          payment_monthly: 1,
          label: '月付'
        },
        {
          payment_monthly: 2,
          label: '季付'
        },
        {
          payment_monthly: 3,
          label: '年付'
        }
      ],
      payment_monthly: 1
    }
  },
  mounted() {
    if (this.buttonpermsStr !== undefined) {
      if (this.buttonpermsStr.indexOf(148) > -1) {
        this.button1 = true
      }
      if (this.buttonpermsStr.indexOf(149) > -1) {
        this.button2 = true
      }
      if (this.buttonpermsStr.indexOf(150) > -1) {
        this.button3 = true
      }
    }
    this.getAll()
  },
  methods: {
    // 添加
    creat() {
      this.dialogFormVisible = true
      this.aaa = false
      this.bbb = false
      this.ccc = true
      this.temp = {
        payment_price: '',
        payment_monthly: 1
      }
    },
    // 编辑
    ruleAdd(row) {
      this.dialogFormVisible = true
      this.aaa = true
      this.bbb = true
      this.ccc = false
      this.temp = {
        payment_price: row.payment_price,
        payment_monthly: row.payment_monthly,
        payment_id: row.payment_id
      }
    },
    // 删除
    ruleDelete(row) {
      this.deleteDataFrom = true
      this.temp = {
        payment_id: row.payment_id
      }
    },
    // 确认删除
    deleteData() {
      return request({
        url: '/v3/rule/delete',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        this.deleteDataFrom = false
        this.$router.go(0) // 刷新页面
      })
    },
    // 确认修改
    updateData() {
      return request({
        url: '/v3/rule/update',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        this.dialogFormVisible = false
        this.$router.go(0) // 刷新页面
        if (res.tip === '更新成功.') {
          Message({
            message: '更改成功',
            type: 'success',
            duration: 0.5 * 1000
          })
        }
      })
    },
    // 确认添加
    creatData() {
      return request({
        url: '/v3/rule/insert',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        this.dialogFormVisible = false
        this.$router.go(0) // 刷新页面
      })
    },
    // 获取列表
    getAll() {
      return request({
        url: '/v3/rule/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: {
          current_page: 0,
          page_size: 0,
          rule_id: 0
        }
      }).then(res => {
        res.ruleDtos.map((value, index) => {
          if (value.payment_monthly == '1') {
            value.payment_monthly = '月付'
          } else if (value.payment_monthly == '2') {
            value.payment_monthly = '季付'
          } else if (value.payment_monthly == '3') {
            value.payment_monthly = '年付'
          }
        })
        this.ruleDtos = res.ruleDtos
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.patRule {
  margin-top: 55px;
  overflow: hidden;
  .patRule_nav {
    margin: 10px;
  }
}
</style>
